import React from 'react';
import SearchBox from '../../components/SearchBox';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Button, Flex } from 'antd';
import { Modal } from 'antd';
import { useState } from 'react';
import { Carousel } from 'antd';
function index() {

    // 轮播图
    const contentStyle: React.CSSProperties = {
        margin: 0,
        height: '220px', // 设置固定高度
        color: '#fff',
        textAlign: 'center',
    };



    // 登录弹框
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //














    const { Header, Content, Sider } = Layout;

    const items1: MenuProps['items'] = [];

    const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
        (icon, index) => {
            const key = String(index + 1);

            return {
                key: `sub${key}`,
                icon: React.createElement(icon),
                label: `subnav ${key}`
            };
        },
    );
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();




    return (
        <div>

            <Layout>

                <Header style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', backgroundColor: 'white' }}>
                    <img src="/src/assets/PixPin_2025-05-22_10-27-22.png" alt="" style={{ width: '5%', height: 'auto', marginLeft: '-27px' }} />
                    <Menu
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                        items={items1}
                        style={{ flex: 1, minWidth: 0, borderBottom: 'none' }}
                    />
                    <Flex gap="small" wrap>
                        <Button type="primary" onClick={showModal}>登录注册</Button>
                    </Flex>

                    {/* 登录弹框 */}
                    <Modal
                        visible={isModalVisible}
                        onCancel={handleCancel}
                        footer={null}
                        centered
                        maskClosable={false}
                    >
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                            <input type="tel" placeholder="请输入电话号码" />
                            <Button type="primary" onClick={() => { console.log('执行登录逻辑'); setIsModalVisible(false); }}>
                                登录
                            </Button>
                        </div>
                    </Modal>


                </Header>
                <Layout>
                    <Sider width={200} style={{ backgroundColor: 'white' }} >
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', borderRight: 0 }}
                            items={items2}
                        />
                    </Sider>
                    <Layout style={{ padding: '30px 30px 30px' }}>
                        <Content
                            style={{ padding: 0, margin: 0, minHeight: 3000, borderRadius: borderRadiusLG, background: 'white' }}>
                            <SearchBox />
                            {/* 轮播图 */}
                            <Carousel arrows infinite={true} autoplay autoplaySpeed={2000}>

                                <div>
                                    <img src="/src/assets/tu1.png" alt="Image 1" style={{ width: '100%', height: '220px', objectFit: 'cover' }} />
                                </div>
                                <div>
                                    <img src="/src/assets/tu2.png" alt="Image 2" style={{ width: '100%', height: '220px', objectFit: 'cover' }} />
                                </div>
                                <div>
                                    <img src="/src/assets/tu3.png" alt="Image 3" style={{ width: '100%', height: '220px', objectFit: 'cover' }} />
                                </div>
                                <div>
                                    <img src="/src/assets/tu4.png" alt="Image 4" style={{ width: '100%', height: '220px', objectFit: 'cover' }} />
                                </div>
                            </Carousel>






                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </div>
    )
}

export default index